<template>
  <div class="container">
    <el-row class="mainCon con">
      <el-col :span="16" class="banner">
        <div class="leftBox">
          <!-- 轮播图 -->
          <div class="profile">
            <div
              class="profileDataBox"
              :style="{ backgroundImage: 'url(' + dataBg + ')' }"
            >
              <div class="profileDataTitle">
                <span class="threeSystemTitle">
                  数据概况&nbsp;
                  <el-tooltip
                    content="统计范围包括账号管辖区域和行业"
                    placement="top"
                    effect="dark"
                  >
                    <i class="icon iconfont iconhuabanfuben"></i>
                  </el-tooltip>
                </span>
              </div>
              <div class="nav">
                <el-row :gutter="20" justify="center" class="navIcon">
                  <el-col :span="6">
                    <div
                      class="navBox"
                      @click="navData(1)"
                      @mouseleave="autoPlay"
                    >
                      <div
                        :class="selectIcon == 1 ? 'selectImg' : 'selectImgBox'"
                      >
                        <div class="imgBox">
                          <img
                            src="../../../static/img/monitorHome/migrantWorker.png"
                            alt
                          />
                        </div>
                      </div>
                      <p>务工人员</p>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div
                      class="navBox"
                      @click="navData(2)"
                      @mouseleave="autoPlay"
                    >
                      <div
                        :class="selectIcon == 2 ? 'selectImg' : 'selectImgBox'"
                      >
                        <div class="imgBox">
                          <img
                            src="../../../static/img/monitorHome/attendanceImg.png"
                            alt
                          />
                        </div>
                      </div>
                      <p>企业考勤</p>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div
                      class="navBox"
                      @click="navData(3)"
                      @mouseleave="autoPlay"
                    >
                      <div
                        :class="selectIcon == 3 ? 'selectImg' : 'selectImgBox'"
                      >
                        <div class="imgBox">
                          <img
                            src="../../../static/img/monitorHome/accountImg.png"
                            alt
                          />
                        </div>
                      </div>
                      <p>企业专户</p>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div
                      class="navBox"
                      @click="navData(4)"
                      @mouseleave="autoPlay"
                    >
                      <div
                        :class="selectIcon == 4 ? 'selectImg' : 'selectImgBox'"
                      >
                        <div class="imgBox">
                          <img
                            src="../../../static/img/monitorHome/substituteImg.png"
                            alt
                          />
                        </div>
                      </div>
                      <p>企业代发</p>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div class="bannerBox">
                <el-carousel
                  type="card"
                  :autoplay="isAutoPlay"
                  :interval="5000"
                  @change="imageChange"
                  ref="bannerData"
                >
                  <el-carousel-item
                    v-for="(item, index) in imgs"
                    :key="index"
                    name="index"
                  >
                    <div
                      class="bannerImgBox"
                      :class="{
                        rightImage: index == rightImage,
                        leftImage: index == leftImage,
                      }"
                    >
                      <img :src="item.img" alt class="bannerImg" />
                      <div class="cardContent">
                        <p class="cardTotalData">
                          {{ dataSurvey.totalData || '0' }}
                        </p>
                        <p class="cardTotalTitle">{{ dataSurvey.totalName }}</p>
                        <div>
                          <div class="cardData">
                            <span class="cardTotal">{{
                              dataSurvey.statisticAdd || '0'
                            }}</span>
                            <p class="cardTotalTitle">
                              {{ dataSurvey.statisticName }}
                            </p>
                          </div>
                          <div class="cardData">
                            <span class="cardTotal">{{
                              dataSurvey.statisticMonth || '0'
                            }}</span>
                            <p class="cardTotalTitle">
                              {{ dataSurvey.statisticMonthName }}
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>
          </div>
          <!-- 轮播图 -->
          <!-- 三项制度 -->
          <div class="threeS">
            <div
              class="threeSystemBox"
              :style="{ backgroundImage: 'url(' + threeBg + ')' }"
            >
              <div>
                <span class="threeSystemTitle">
                  三项制度落实&nbsp;
                  <el-tooltip
                    content="统计范围包括账号管辖区域和行业"
                    placement="top"
                    effect="dark"
                  >
                    <i class="icon iconfont iconhuabanfuben"></i>
                  </el-tooltip>
                </span>
                <div class="threeSystemContent">
                  <div v-for="(items, index) in threeSystem" :key="index">
                    <div
                      :id="'threeSystem' + index"
                      class="threeSystem claerfix"
                    ></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 三项制度 -->
          <!-- 分行业统计 -->
          <div class="industry">
            <div
              class="industryStatisticBox"
              :style="{ backgroundImage: 'url(' + industryBg + ')' }"
            >
              <div>
                <p class="industryTitle">分行业统计</p>
                <div class="clearfix">
                  <div class="industryContent fl">
                    <div id="industryStatistic"></div>
                  </div>
                  <div class="selectIndustry">
                    <div>
                      <el-select
                        v-model="value"
                        filterable
                        @change="changeIndustry"
                      >
                        <el-option
                          v-for="item in options"
                          :key="item.id"
                          :label="item.industryName"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <!-- 右边模块 -->
      <el-col :span="8" class="rightBox">
        <div>
          <div class="totalInfo">
            <div class="personInfo clearfix">
              <div class="fl">
                <img
                  src="../../../static/img/monitorHome/personPhoto.png"
                  alt
                />
              </div>
              <div class="fl adminBox">
                <p>{{ nickName }}</p>
                <p>{{ deptmentName }}</p>
              </div>
            </div>
            <div class="noHandleBox">
              <el-tabs
                v-model="activeName"
                @tab-click="handleClick"
                :stretch="true"
              >
                <el-tab-pane name="first">
                  <span slot="label">
                    <span>待审核企业</span>
                    <el-badge
                      :value="examineTotal"
                      :max="99"
                      class="item"
                      v-if="examineTotal > 0"
                    ></el-badge>
                  </span>
                  <div>
                    <ul>
                      <li
                        class="noHandEnterprise clearfix"
                        v-for="(item, index) of examineData"
                        :key="index"
                      >
                        <p
                          class="fl enterpriseName"
                          @click="
                            goEnterpriseDetail(
                              item.id,
                              '/home/enterpriseSet/employerAuditList'
                            )
                          "
                        >
                          {{ item.name }}
                        </p>
                        <p class="fr">{{ item.createTime }}</p>
                      </li>
                    </ul>
                    <div v-if="examineData.length <= 0" class="emptyData">
                      暂无待审核企业
                    </div>
                  </div>
                  <div
                    class="seeAllBut"
                    v-if="showAll"
                    @click="
                      showAllEvent('/home/enterpriseSet/employerAuditList')
                    "
                  >
                    <button
                      type="button"
                      class="fontBorderTheme fontColorTheme"
                    >
                      查看全部
                    </button>
                  </div>
                </el-tab-pane>

                <el-tab-pane name="second">
                  <span slot="label">
                    <span>待处理预警</span>
                    <el-badge
                      :value="untreatedWarnTotal"
                      :max="99"
                      class="item"
                      v-if="untreatedWarnTotal > 0"
                    ></el-badge>
                  </span>
                  <div>
                    <ul>
                      <li
                        class="clearfix noHandleWarn"
                        v-for="(item, index) of untreatedWarn"
                        :key="index"
                      >
                        <div class="fl">
                          <p>{{ item.reason }}</p>
                          <p
                            class="enterpriseName"
                            @click="
                              goAlertDetail(
                                item.id,
                                '/home/project/alertProjectList'
                              )
                            "
                          >
                            {{ item.companyName }}
                          </p>
                        </div>
                        <p class="fr">{{ item.createTime }}</p>
                      </li>
                    </ul>
                    <div class="emptyData" v-if="noWarning">暂无待处理预警</div>
                  </div>
                  <div
                    class="seeAllBut"
                    v-if="isSeeAll"
                    @click="seeAll('/home/project/alertProjectList')"
                  >
                    <button type="button">查看全部</button>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
            <div class="inject">
              <ul>
                <li class="entryEnterpriseBox">
                  <div class="clearfix entryEnterprise">
                    <span class="fl">已入驻未录入人员企业</span>
                    <span class="fr">{{ injectNotEnter }}</span>
                  </div>
                  <el-progress
                    :percentage="employeeCount"
                    :color="noInputColor"
                    :show-text="false"
                  ></el-progress>
                </li>
                <li class="entryEnterpriseBox">
                  <div class="clearfix entryEnterprise">
                    <span class="fl">已入驻未考勤企业</span>
                    <span class="fr">{{ injectNoAttendance }}</span>
                  </div>
                  <el-progress
                    :percentage="attCount"
                    :color="noAttendanceColor"
                    :show-text="false"
                  ></el-progress>
                </li>
                <li class="entryEnterpriseBox">
                  <div class="clearfix entryEnterprise">
                    <span class="fl">已入驻未代发工资企业</span>
                    <span class="fr">{{ injectNonGeneration }}</span>
                  </div>
                  <el-progress
                    :percentage="salCount"
                    :color="noAttendanceColor"
                    :show-text="false"
                  ></el-progress>
                </li>
              </ul>
            </div>
          </div>
          <!-- 政策通报模块 -->
          <div class="policyOnBox">
            <div class="policyOnTitle">政策通报</div>
            <div>
              <ul>
                <li
                  class="policyOn clearfix"
                  v-for="(item, index) of policyData"
                  :key="index"
                  @click="showInfor(item.id, '/home/notice/inforList')"
                >
                  <span class="fl"></span>
                  <div class="fl">
                    <p>{{ item.title }}</p>
                    <p>{{ item.createTime }}</p>
                  </div>
                </li>
                <div style="text-align: center" v-if="policyData.length <= 0">
                  暂无政策通报
                </div>
              </ul>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'monitorHome',
  data() {
    return {
      showAll: false, //待审核企业的查看全部按钮
      dataBg: require('../../../static/img/monitorHome/dataBg.png'), //背景图
      threeBg: require('../../../static/img/monitorHome/threeBg.png'),
      industryBg: require('../../../static/img/monitorHome/industryBg.png'),
      imgs: [
        { index: 1, img: require('../../../static/img/monitorHome/card.png') },
        { index: 2, img: require('../../../static/img/monitorHome/card.png') },
        { index: 3, img: require('../../../static/img/monitorHome/card.png') },
        { index: 4, img: require('../../../static/img/monitorHome/card.png') },
        // { index: 5, img: "../../../static/img/monitorHome/card.png"}
      ],
      leftImage: 4,
      rightImage: 0,
      // threeSystem: [
      //   {
      //     id: "3",
      //     aa: "80%",
      //     bb: "10%"
      //   },
      //   {
      //     id: "3",
      //     aa: "30%",
      //     bb: "30%"
      //   },
      //   {
      //     id: "3",
      //     aa: "30%",
      //     bb: "60%"
      //   }
      // ],
      threeSystem: [],
      // options: [
      //   {
      //     value: "选项1",
      //     label: "黄金糕"
      //   },
      //   {
      //     value: "选项2",
      //     label: "双皮奶"
      //   },
      //   {
      //     value: "选项3",
      //     label: "蚵仔煎"
      //   },
      //   {
      //     value: "选项4",
      //     label: "龙须面"
      //   },
      //   {
      //     value: "选项5",
      //     label: "北京烤鸭"
      //   }
      // ],
      options: [],
      value: '农、林、牧、渔业',
      activeName: 'first', //
      // percentage:0,
      noInputColor: '#05DEBD',
      noAttendanceColor: '#256DD9',
      selectIcon: 1, //选中图标默认第一个图标  数据概况
      selectCard: '', //默认显示第一个卡片 数据概况
      policyData: [], //政策通报
      untreatedWarn: [], //未处理预警
      examineData: [], //待审核数据
      noWarning: false,
      dataSurvey: {
        totalName: '务工总数',
        totalData: '',
        statisticAdd: '',
        statisticName: '本月新增人数',
        statisticMonth: '',
        statisticMonthName: '本月离职人数',
      },
      companyTotal: '', //企业总数
      kqCompanyTotal: '', //考勤企业数
      monthKqTotal: '', //本月考勤数
      workTotal: '', //务工总数
      addTotal: '', //本月新增人数
      leaveTotal: '', //本月离职人数
      companyAccountTotal: '', //开设专户企业
      addComAccountTotal: '', //本月新增专户
      reSalaryTotal: '', //专户代发金额
      reCompanyTotal: '', //代发企业总数
      reWorkerTotal: '', //代发总人次
      reAmountTotal: '', //本月代发金额
      examineTotal: '', //待审核企业总数
      untreatedWarnTotal: '', //待处理预警
      isSeeAll: false, //查看全部的预警按钮
      isBeAudit: 1, //判断是否是待审核还是待处理的查看全部
      injectNotEnter: '',
      injectNoAttendance: '',
      injectNonGeneration: '',
      employeeCount: 0, // --未录入人员企业数
      attCount: 0, //--未考勤企业数
      salCount: 0, //--未代发企业数
      nickName: '',
      deptmentName: '',
      isAutoPlay: true,
    }
  },
  created() {
    this.nickName = this.$store.state.nickName
    this.deptmentName = this.$store.state.deptmentName
  },
  mounted() {
    //防止页面后退
    history.pushState(null, null, document.URL)
    window.addEventListener('popstate', function () {
      history.pushState(null, null, document.URL)
    })
    // 获取数据概况的数据
    this.getDataSurvey()
    // 获取政策通报数据
    this.getpolicyData()
    this.getExamineData()
    this.getEarlyWarning()
    // 获取三项制度数据
    this.getThreeData()
    //一级行业下拉框接口
    this.getIndustrySelect()

    this.changeIndustry('01')
    this.getInjectNoData()
    this.imageChange('0')
  },
  methods: {
    imageChange(active, pre) {
      this.selectIcon = active + 1
      if (active == 0) {
        this.leftImage = this.imgs.length - 1
      } else {
        this.leftImage = active - 1
      }
      if (active == this.imgs.length - 1) {
        this.rightImage = 0
      } else {
        this.rightImage = active + 1
      }

      if (active == 0) {
        this.dataSurvey.totalName = '务工总数'
        this.dataSurvey.totalData = this.workTotal
        this.dataSurvey.statisticName = '本月新增人数'
        this.dataSurvey.statisticAdd = this.addTotal
        this.dataSurvey.statisticMonthName = '本月离职人数'
        this.dataSurvey.statisticMonth = this.leaveTotal
      } else if (active == 1) {
        this.dataSurvey.totalName = '企业总数'
        this.dataSurvey.totalData = this.companyTotal
        this.dataSurvey.statisticName = '考勤企业数'
        this.dataSurvey.statisticAdd = this.kqCompanyTotal
        this.dataSurvey.statisticMonthName = '本月考勤数'
        this.dataSurvey.statisticMonth = this.monthKqTotal
      } else if (active == 2) {
        this.dataSurvey.totalName = '开设专户企业'
        this.dataSurvey.totalData = this.companyAccountTotal
        this.dataSurvey.statisticName = '本月新增专户'
        this.dataSurvey.statisticAdd = this.addComAccountTotal
        this.dataSurvey.statisticMonthName = '专户代发总额'
        this.dataSurvey.statisticMonth = this.reSalaryTotal
      } else if (active == 3) {
        this.dataSurvey.totalName = '代发企业总数'
        this.dataSurvey.totalData = this.reCompanyTotal
        this.dataSurvey.statisticName = '代发总人次'
        this.dataSurvey.statisticAdd = this.reWorkerTotal
        this.dataSurvey.statisticMonthName = '本月代发金额'
        this.dataSurvey.statisticMonth = this.reAmountTotal
      }
    },
    // 获取三项制度数据
    getThreeData() {
      this.axios({
        method: 'post',
        url: 'api-s/nc/companystats/expand/homesysstats',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.threeSystem = response.data.result
              this.getThreeSystem()
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    getThreeSystem() {
      this.$nextTick(() => {
        for (var i = 0, len = this.threeSystem.length; i < len; i++) {
          // $.each(this.threeSystem,function(index,item){
          var myChart = this.$echarts.init(
            document.getElementById('threeSystem' + i)
          )
          var changeColor = ['#F7563F', '#3AE3FF', '#FFE687']
          var that = this.threeSystem[i]
          var index = i
          changeColor.forEach(function (value, j) {
            if (index == j) {
              that.changeColor = value
            }
          })
          var temp = [
            {
              value: this.threeSystem[i].isTotal,
              name: '',
              itemStyle: { color: this.threeSystem[i].changeColor },
            },
            {
              value: this.threeSystem[i].notTotal,
              name: '',
              itemStyle: { color: 'rgba(255,255,255,0.5)' },
            },
          ]
          var proportion = this.threeSystem[i].rate
          myChart.setOption({
            // tooltip: {
            //   // trigger: "item",
            //   formatter: "{a} <br/>{b}: {c} ({d}%)"
            // },
            series: [
              {
                name: '访问来源',
                type: 'pie',
                radius: ['70%', '80%'],
                avoidLabelOverlap: false,
                label: {
                  normal: {
                    show: false,
                    position: 'outside',
                  },
                  emphasis: {
                    show: true,
                    textStyle: {
                      fontSize: '30',
                      fontWeight: 'bold',
                    },
                  },
                },
                labelLine: {
                  normal: {
                    show: false,
                  },
                },
                data: temp,
              },
            ],
            graphic: [
              {
                type: 'text',
                left: 'center',
                top: '35%',
                z: 10,
                zlevel: 10,
                style: {
                  text: proportion,
                  fill: this.threeSystem[i].changeColor,
                  textAlign: 'center',
                  font: 'small-caps 28px/1 sans-serif',
                },
              },
              {
                type: 'text',
                left: 'center',
                top: '55%',
                z: 10,
                zlevel: 10,
                style: {
                  text: this.threeSystem[i].name,
                  fill: this.threeSystem[i].changeColor,
                  textAlign: 'center',
                  font: 'small-caps 14px/1 sans-serif',
                },
              },
            ],
          })
        }
      })
      // 绘制图表
    },
    getIndustryStatistic(data) {
      var color = []
      data.forEach(function (value, i) {
        if (value.value == 0) {
          color = ['#83b0d4']
        } else {
          color = [
            '#3AA0FF',
            '#F2637B',
            '#FF8ACC',
            '#3AE3FF',
            '#F9FFAA',
            '#975FE4',
          ]
        }
      })
      var myChart1 = this.$echarts.init(
        document.getElementById('industryStatistic')
      )
      var option = {
        // tooltip: {
        //   trigger: "item",
        //   formatter: "{a} <br/>{b}: {c} ({d}%)"
        // },
        legend: {
          orient: 'vertical',
          x: 'left',
          left: '60%',
          top: '30%',

          formatter: function (name) {
            var rate
            var accountNum
            var nameId
            var clientlabels = data
            clientlabels.forEach(function (value, i) {
              if (value.name == name) {
                rate = value.rate
                accountNum = value.value
                nameId = value.name
              }
            })
            return nameId + '   ' + rate + '   ' + accountNum + '个专户'
          },
          textStyle: {
            color: '#fff',
            padding: [10, 10, 10, 10],
          },
        },
        color: color,
        series: [
          {
            name: data.name,
            type: 'pie',
            center: ['30%', '50%'],
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              normal: {
                borderWidth: 6,
                borderColor: '#0153A8',
              },
            },
            label: {
              normal: {
                show: false,
                position: 'center',
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '18',
                  fontWeight: 'bold',
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: data,
          },
        ],
      }
      myChart1.setOption(option)
    },
    handleClick(tab, event) {
      if (this.activeName == 'second') {
        this.getEarlyWarning()
        this.isBeAudit = 2
        // this.isSeeAll = false;
      } else {
        this.getExamineData()
        this.isBeAudit = 1
        // this.isSeeAll = false;
      }
    },
    navData(index) {
      var i = index - 1
      this.selectCard = true
      this.isAutoPlay = false
      this.$refs.bannerData.setActiveItem(i)
    },
    autoPlay() {
      this.isAutoPlay = true
    },
    // 获取政策通报数据
    getpolicyData() {
      this.axios({
        method: 'post',
        url: 'api-i/info/base/infolist',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.policyData = response.data.result.results
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    // 获取待处理预警数据
    getEarlyWarning() {
      this.axios({
        method: 'post',
        url: 'api-a/nc/alert/base/monitor/list',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              if (response.data.result.results.length <= 0) {
                this.noWarning = true
                this.isSeeAll = false
              } else {
                this.untreatedWarn = response.data.result.results
                this.untreatedWarnTotal = response.data.result.total
                this.isSeeAll = true
              }
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    // 获取待审核数据
    getExamineData() {
      this.axios({
        method: 'post',
        url: 'api-c/companyaudit/base/comlist',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.examineData = response.data.result.results
              this.examineTotal = response.data.result.total
              if (this.examineData.length > 0) {
                this.showAll = true
              } else {
                this.showAll = false
              }
            } else {
              this.$message({
                message: '数据加载失败',
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    //一级行业下拉框接口
    getIndustrySelect() {
      this.axios({
        method: 'post',
        url: 'api-bs/industry/base/firstindustry',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.options = response.data.result
            } else {
              this.$message({
                message: '数据获取失败',
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    // 行业选中显示的数据
    changeIndustry(item) {
      this.axios({
        method: 'post',
        url: 'api-s/nc/companystats/expand/homeaccountstats',
        data: {
          industryId: item,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.getIndustryStatistic(response.data.result)
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    // 查看全部的待处理预警
    seeAll(routerUrl) {
      if (this.accessControl(routerUrl) == -1) {
        this.goNoAccessPage()
      } else {
        this.$router.push({
          name: 'alertProjectList',
          path: 'home/project/alertProjectList',
          query: {
            notHandle: '01',
          },
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/project/alertProjectList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
    //查看全部的待审核企业
    showAllEvent(routerUrl) {
      if (this.accessControl(routerUrl) == -1) {
        this.goNoAccessPage()
      } else {
        this.$router.push({
          name: 'employerAuditList',
          path: 'home/enterpriseSet/employerAuditList',
          query: {
            pending: 'PENDING',
            type: 'ALL',
          },
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/enterpriseSet/employerAuditList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
    //获取数据概况的数据
    getDataSurvey() {
      this.axios({
        method: 'post',
        url: 'api-s/nc/companystats/expand/datasurvey',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              var result = response.data.result
              this.companyTotal = result.companyTotal //企业总数
              this.kqCompanyTotal = result.isAttTotal //考勤企业数
              this.monthKqTotal = result.monthisAttTotal //本月考勤数
              this.workTotal = result.workTotal //务工总数
              this.addTotal = result.addTotal //本月新增人数
              this.leaveTotal = result.leaveTotal //本月离职人数
              this.companyAccountTotal = result.isAccountComTotal //开设专户企业
              this.addComAccountTotal = result.addAccountComTotal //本月新增专户
              this.reSalaryTotal = result.saAmountComTotal //专户代发金额
              this.reCompanyTotal = result.isSalaryTotal //代发企业总数
              this.reWorkerTotal = result.saEmpComTotal //代发总人次
              this.reAmountTotal = result.reAmountTotal //本月代发金额

              // 默认显示务工人数的值
              this.dataSurvey.totalData = this.workTotal
              this.dataSurvey.statisticAdd = this.addTotal
              this.dataSurvey.statisticMonth = this.leaveTotal
            } else {
              this.$message({
                message: '数据获取失败',
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    // 获取已入驻未录入，未考勤，未代发企业
    getInjectNoData() {
      this.axios({
        method: 'post',
        url: '/api-s/nc/companystats/base/comcount',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.injectNotEnter = response.data.result.employeeCount
              this.injectNoAttendance = response.data.result.attCount
              this.injectNonGeneration = response.data.result.salCount
              var comCount = response.data.result.comCount
              setTimeout(function () {
                this.employeeCount += 5
                this.attCount += 5
                this.salCount += 5
              }, 1000)
              var employeeCountPro = Math.floor(
                (this.injectNotEnter / comCount) * 100
              )
              var attCountPro = Math.floor(
                (this.injectNoAttendance / comCount) * 100
              )
              var salCountPro = Math.floor(
                (this.injectNonGeneration / comCount) * 100
              )

              if (this.employeeCount < employeeCountPro) {
                this.employeeCount = employeeCountPro
              }
              if (this.attCount < attCountPro) {
                this.attCount = attCountPro
              }
              if (this.salCount < salCountPro) {
                this.salCount = salCountPro
              }
            } else {
              this.$message({
                message: '数据获取失败',
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    showInfor(id, routerUrl) {
      if (this.accessControl(routerUrl) == -1) {
        this.goNoAccessPage()
      } else {
        this.$router.push({
          path: '/home/notice/inforDetail',
          name: 'inforDetail',
          query: { id: id, pathUrl: '/home' },
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/notice/inforList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
    // 跳转待审核企业详情
    goEnterpriseDetail(id, routerUrl) {
      if (this.accessControl(routerUrl) == -1) {
        this.goNoAccessPage()
      } else {
        this.$router.push({
          name: 'checkPage',
          path: 'home/checkManage/checkPage',
          query: {
            id: id,
          },
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/enterpriseSet/employerAuditList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
    goAlertDetail(id, routerUrl) {
      if (this.accessControl(routerUrl) == -1) {
        this.goNoAccessPage()
      } else {
        this.$router.push({
          name: 'alertDetail',
          path: 'home/project/alertDetail',
          query: {
            alertId: id,
          },
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/project/alertProjectList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
  },
}
</script>

<style scoped lang="less">
.container {
  // min-width:1440px;
  .con {
    top: 0px;
    // left: 10px;
    // right: -10px;
    bottom: 0;
    padding: 24px 24px 24px 24px;
  }
  .banner {
    // min-width: 750px;
  }
  .leftBox {
    .profile {
      position: relative;
      height: 460px;
      width: 100%;
    }
    .profileDataBox {
      // width: 100%;
      // height: 460px;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 24px 38px;
      background-size: 100% 100%;
      .profileDataTitle {
        font-size: 18px;
        // font-family: "宋体";
        color: #fff;
        margin-bottom: 12px;
      }
      .nav {
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        margin-bottom: 5px;
        .selectImgBox {
          width: 58px;
          height: 58px;
          margin: auto;
          padding-top: 6px;
        }
        .selectImg {
          width: 58px;
          height: 58px;
          border: 1px solid #fff;
          border-radius: 50%;
          margin: auto;
          padding-top: 6px;
        }
      }
      .navIcon {
        margin-left: 0;
        margin-right: 0;
        padding: 20px;
        .imgBox {
          width: 44px;
          height: 44px;
          margin: auto;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .navBox {
          cursor: pointer;

          p {
            text-align: center;
            color: #fff;
            font-size: 14px;
            margin-top: 8px;
          }
        }
      }
      .bannerBox {
        // padding: 36px 0;
        height: 280px;
        text-align: center;
        position: relative;
        /deep/ .el-carousel {
          height: 280px;
          .el-carousel__container {
            height: 240px;
            .cardContent {
              p {
                color: transparent !important;
              }
              .cardData {
                color: transparent !important;
              }
            }
            .leftImage {
              transform: perspective(1000px) rotateY(-120deg);
              -ms-transform: perspective(1000px) rotateY(-120deg);
              -moz-transform: perspective(1000px) rotateY(-120deg);
              -webkit-transform: perspective(1000px) rotateY(-120deg);
              -o-transform: perspective(1000px) rotateY(-120deg);
              opacity: 0.5;
              // .cardContent {
              //   p{
              //     color:transparent !important;
              //   }
              //   .cardData {
              //     color:transparent !important;
              //   }
              // }
            }

            .rightImage {
              transform: perspective(1000px) rotateY(120deg);
              -ms-transform: perspective(1000px) rotateY(120deg);
              -moz-transform: perspective(1000px) rotateY(120deg);
              -webkit-transform: perspective(1000px) rotateY(120deg);
              -o-transform: perspective(1000px) rotateY(120deg);
              opacity: 0.5;
              // .cardContent {
              //   p{
              //     color:transparent !important;
              //   }
              //   .cardData {
              //     color:transparent !important;
              //   }
              // }
            }
            .is-active {
              .cardContent {
                p {
                  color: #fff !important;
                }
                .cardData {
                  color: #fff !important;
                }
              }
            }
          }
          .el-carousel__mask {
            display: none;
          }
        }
        .cardContent {
          padding: 30px;
          position: absolute;
          top: 0;
          height: 100%;
          width: 100%;
          color: #fff;
          .cardData {
            display: inline-block;
            padding: 30px 3.5% 0;
          }
          .cardTotalTitle {
            font-size: 14px;
          }
          .cardTotalData {
            font-size: 36px;
          }
          .cardTotal {
            font-size: 18px;
          }
        }
        .bannerImgBox {
          height: 80%;
          margin-top: 22px;
          .bannerImg {
            width: 100%;
            max-width: 340px;
            height: 100%;
          }
        }
      }
    }
    .threeS {
      position: relative;
      height: 306px;
      width: 100%;
    }
    .threeSystemBox {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-size: 100% 100%;
      margin-top: 24px;
      padding: 20px 36px;
      .threeSystemTitle {
        color: #fff;
        font-size: 18px;
      }
      .threeSystem {
        height: 200px;
        width: 200px;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        -ms-transform: translateX(-50%); /* IE 9 */
        -moz-transform: translateX(-50%); /* Firefox */
        -webkit-transform: translateX(-50%); /* Safari 和 Chrome */
        -o-transform: translateX(-50%);
      }
      .threeSystemContent {
        width: 100%;
        height: 200px;
        > div {
          width: 33.33%;
          float: left;
        }
      }
    }
    .industry {
      position: relative;
      height: 460px;
      width: 100%;
      margin-top: 10px;

      .industryStatisticBox {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding: 20px 36px;
        > div {
          position: relative;
        }
        .industryTitle {
          color: #fff;
          font-size: 18px;
          margin-top: 20px;
        }
        .industryContent {
          width: 100%;
          height: 350px;
          > div {
            width: 100%;
            height: 100%;
          }
        }
        .selectIndustry {
          position: absolute;
          right: 100px;
          top: 65px;
          width: 150px;
        }
      }
    }
  }
  /deep/ .el-carousel__mask {
    // width: 100%;
    background: #000;
    opacity: 0.3;
    // border-radius: 16px;
  }
  .rightBox {
    .totalInfo {
      padding: 25px;
      background: #fff;
      border-radius: 4px;
      .personInfo {
        .adminBox {
          margin-top: 20px;
          margin-left: 24px;
          p:nth-child(1) {
            font-size: 18px;
            color: #333;
          }
          p:nth-child(2) {
            font-size: 14px;
            color: #666;
          }
        }
      }
      .noHandleBox {
        margin-top: 25px;
        /deep/ .el-tabs__item {
          color: #666;
        }
        /deep/ .el-tabs__item.is-active {
          color: #333;
        }
        /deep/ .el-tabs__active-bar {
          background-color: #3189ea;
        }
        /deep/ .el-tabs__header {
          margin: 0;
        }
        .noHandEnterprise {
          padding: 20px 0;
          border-bottom: 1px solid #dee5f4;
          p:nth-child(1) {
            font-size: 14px;
            color: #333;
            width: 70%;
          }
          p:nth-child(2) {
            font-size: 14px;
            color: #999;
            width: 30%;
            text-align: right;
          }
        }
        .noHandleWarn {
          padding: 20px 0;
          border-bottom: 1px solid #dee5f4;
          div {
            width: 70%;
            p:nth-child(1) {
              font-size: 14px;
              color: #333;
              margin-bottom: 8px;
            }
            p:nth-child(2) {
              font-size: 12px;
              color: #999;
            }
          }
          > p {
            font-size: 14px;
            color: #999;
            margin-top: 12px;
            width: 30%;
            text-align: right;
          }
        }
        .seeAllBut {
          margin-top: 36px;
          font-size: 14px;
          text-align: center;
          button {
            width: 136px;
            // padding: 11px 0;
            height: 36px;
            color: #009588;
            border: 0;
            border: 1px solid #009588;
            background: #fff;
            border-radius: 5px;
            cursor: pointer;
            line-height: 36px;
          }
        }
        .emptyData {
          font-size: 14px;
          color: #666;
          text-align: center;
          margin-top: 49px;
        }
        .enterpriseName {
          cursor: pointer;
        }
      }
      .entryEnterpriseBox {
        margin-bottom: 20px;
        .entryEnterprise {
          margin-bottom: 8px;
          span:nth-child(1) {
            font-size: 14px;
            color: #999;
          }
          span:nth-child(2) {
            font-size: 14px;
            color: #333;
          }
        }
      }
    }
    .inject {
      margin-top: 60px;
    }
    .policyOnBox {
      margin-top: 20px;
      padding: 24px;
      background: #fff;
      .policyOnTitle {
        font-size: 18px;
        color: #333;
        margin-bottom: 26px;
      }
      .policyOn {
        margin-bottom: 20px;
        cursor: pointer;
        span {
          // display:inline-block;
          width: 4px;
          height: 4px;
          background: #009588;
          border-radius: 50%;
          margin-top: 8px;
          margin-right: 8px;
        }
        div {
          width: 90%;
          p:nth-child(1) {
            font-size: 14px;
            color: #333;
            margin-bottom: 8px;
            width: 100%;
            // display: block;
            word-break: break-all;
            word-wrap: break-word;
          }
          p:nth-child(2) {
            font-size: 12px;
            color: #999;
          }
        }
      }
    }
  }
  /deep/ .el-badge__content {
    line-height: 16px;
  }
}
</style>
